<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <input type="text" v-model="text">
        {{text}}
    </div>
    <script>
        // 重绘：结构和大小不发生变化（改变颜色）
        // 回流：结构或者大小发生变化
        // 回流必重绘


        //分析
        // 1、将vue实例中data的数据绑定在输入框和文本节点上
        // 2、当文本框的内容发生变化是，data中的数据也会发生变化（视图发生变化数据也发生变化）
        // 3、当data中的数据发生变化是，输入框和文本节点数据也会发生变化（数据发生变化，视图也会随之变化）


        // 节点分为   文本节点   属性节点   元素节点
        // 节点   nodeValue   nodeType   nodeName

        //创建碎片化文档--拦截所有的节点---将来回流一次
        function nodeFragment(node, vm) {
            //创建一个碎片化文档容器
            var fragment = document.createDocumentFragment()
            var child
            while (child = node.firstChild) {
                compile(child, vm)
                fragment.appendChild(child)
            }

            return fragment
        }



        //定义一个编译器compile 
        // 1、将vue实例中data的数据绑定在输入框和文本节点上
        function compile(node, vm) {
            console.log(node);
            //元素节点  nodeType=1   文本节点   nodeType=3   属性节点 nodeType=2
            if (node.nodeType == 1) {
                //说明node是元素节点
                // 获取该节点的属性集合
                var attr = node.attributes
                for (var i = 0; i < attr.length; i++) {
                    console.log(attr[i].nodeName);  //type || v-model
                    if (attr[i].nodeName == "v-model") {
                        var name = attr[i].nodeValue
                        console.log(name); // text
                        node.value = vm.data[name]

                    }
                }
            }

            if (node.nodeType == 3) {
                //说明是文本节点
                console.log(node); //{{text}}
                var reg = /\{\{(.*)\}\}/
                if (reg.test(node.nodeValue)) {
                    console.log(RegExp);
                    var name = RegExp.$1  //正则表达式匹配的项  $1...$99 
                    console.log(name); //text
                    node.nodeValue = vm.data[name]
                }
            }

        }


        function Vue(options) {
            console.log(options);
            var id = options.el.slice(1)
            this.data = options.data
            var dom = nodeFragment(document.getElementById(id), this)
            console.log(dom);
            document.getElementById(id).appendChild(dom)
        }
        var vm = new Vue({
            el: "#app",
            data: {
                text: "好像是这么一回事"
            }
        })

        // 今天气人了吗？
        // 右气人了吗

    </script>


</body>

</html>